<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <link rel="stylesheet" type="" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <title>千图网</title>
</head>

<body>
    <!-- 导航栏  -->
    <nav class="nav">
        <div class="container nav-container">
            <ul class="nav-left">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#"><span>所有分类</span></a></li>
                <li><a href="#">设计创意</a></li>
                <li><a href="#">办公创意</a></li>
                <li><a href="#">···</a></li>
            </ul>
            <ul class="nav-right">
                <li class="vip"><a href="#"><span>VIP中心</span></a></li>
                <li class="login"><a href="#">请登录</a></li>
                <li class="register"><a href="#">免费注册</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <header>
            <a href="#"><img src="./img/1.png" alt=""></a>
            <ul class="search">
                <li class="search-list">
                    <a href="#">全站</a>
                    <input type="text" placeholder="800万免费设计素材任意下载">
                    <a href="#"><span></span></a>
                </li>
                <li class="search-info">
                    热门搜索:
                    <a href="#" class="lv">七夕</a>
                    <a href="#" class="hei">详情页</a>
                    <a href="#" class="lv">icon</a>
                    <a href="#" class="hei">主图</a>
                    <a href="#" class="lv">秋季</a>
                    <a href="#" class="lv">PPT模版</a>
                    <a href="#" class="hei">EXCEL模版</a>
                    <a href="#" class="hei">首页</a>
                    <a href="#" class="hei">个人简历</a>
                    <a href="#" class="lv">装饰画</a>
                </li>
            </ul>
        </header>
    </div>

    <!--轮播图  -->
    <div class="banner">
        <div class="container banner-info">
            <ul class="img-list">
                <li class="current"><a href="#"><img src="img/banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner08.jpg" alt=""></a></li>
            </ul>
            <ul class="indicator">
                <li class="active"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
    </div>

    <div class="container">
        <div class="contant-box">
            <div class="contant-box-top clearfix">
                <div><span class="s11"></span> 精选专题
                </div>
                <a href="#">100万党建素材、PPT汇报模版无限下载，每天仅需0.18元立享VIP特权</a>
                <a href="#" class="f">更多 >></a>
            </div>
            <ul class="contant-box-img">
                <li class="img1">
                    <a href="#" class="img-1">
                        <img src="img/jxzt01.jpg" alt="">
                        <div class="bg"></div>
                        <section class="zao">
                            <h2>和啤酒有关</h2>
                            <p>啤酒是如何拯救世界的</p>
                        </section>
                   </a>
                </li>
                 <li class="img1">
                    <a href="#" class="img-1">
                        <img src="img/jxzt02.jpg" alt="">
                        <div class="bg"></div>
                        <section class="zao">
                            <h2>和啤酒有关</h2>
                            <p>啤酒是如何拯救世界的</p>
                        </section>
                    </a>
                </li>
                 <li class="img1">
                    <a href="#" class="img-1">
                        <img src="img/jxzt03.jpg" alt="">
                        <div class="bg"></div>
                        <section class="zao">
                            <h2>和啤酒有关</h2>
                            <p>啤酒是如何拯救世界的</p>
                        </section>
                    </a>
                </li>
                 <li class="img1">
                    <a href="#" class="img-1">
                        <img src="img/jxzt04.jpg" alt="">
                        <div class="bg"></div>
                        <section class="zao">
                            <h2>和啤酒有关</h2>
                            <p>啤酒是如何拯救世界的</p>
                        </section>
                    </a>
                </li>
            </ul>
        </div>
        <div class="info-2">
            <div class="info-2-top clearfix">
                <div><span class="s12"></span> 商用海报
                </div>
                <div class="zi">
                    <li><a href="#">招聘海报</a></li>
                    <li><a href="#">配图海报</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">促销海报</a></li>
                    <li><a href="#">原创插画</a></li>
                </div>
                <a href="#" class="f">更多 >></a>
            </div>
            <ul class="content-list">
                <li>
                    <a href="#">
                        <img src="img/syhb01.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/syhb02.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/syhb03.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/syhb04.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- <div style="height:2000px;"></div> -->



     <footer class="footer container clearfix">
        <div class="footer-top">
            <div class="foot-top-left">
                <ul><strong>常见问题</strong>
                    <li><a href="#">成为特邀设计师</a></li>
                    <li><a href="#">成为原创贡献者</a></li>
                    <li><a href="#">注册登录</a></li>
                    <li><a href="#">帐号/密码</a></li>
                    <li><a href="#">充值/售后</a></li>
                    <li><a href="#">版权投诉</a></li>
                </ul>
                <ul><strong>关于千图网</strong>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">媒体报道</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">心系千图</a></li>
                    <li><a href="#">每日更新</a></li>
                </ul>
                <ul><strong>产品服务</strong>
                    <li><a href="#">官方博客</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">千图导航</a></li>
                </ul>
                <ul><strong>友情连接</strong>
                    <li><a href="#">我图网</a></li>
                    <li><a href="#">千库网</a></li>
                    <li><a href="#">摄图网</a></li>
                    <li><a href="#">包图网</a></li>
                    <li><a href="#">视达网</a></li>
                    <li><a href="#">更多>></a></li>
                </ul>
            </div>
            <div class="foot-top-right">
                <h5><a href="#">客服咨询</a></h5>
                <p class="b"><span class="s5"></span>400-998-7011 <span style="font-size:14px;color:#888;">（9:00-18:00）</span></p>
                <p class="b"><span class="s6"></span>feedback@pic.com</p>
                <div class="dian"><span class="s7"></span>点我交谈</div>
            </div>
        </div>
        <hr>
        <div class="footer-bottom ">
            <div class="footer-bottom-left">
                <span class="s8"></span>
                <span class="s9"></span>
                <a href="#">注册声明</a>
                <a href="#">版权声明</a>
                <a href="#">售后服务</a>
            </div>
            <div class="footer-bottom-right clearfix">
                <span>Copyright ©2013-2017 千图网</span>
                <span><a href="#">沪ICP备10011451号-6</a></span>
                <span class="s10"></span>
                <span>上海工商 安全实名验证 信用网站</span>
            </div>
        </div>
    </footer>

    <script src="js/index.js"></script>
</body>

</html>
<script>

</script>